<!--某个班级的学生信息成绩以及评价小组情况-->
<template>
  <div id="counselor" class="">
    <div class="head">
      <p class="col-sm-2">专业:</p>
      <select class="col-sm-2" v-model="selectedMajor">
         <option v-for="major in majors">{{major.professionName}}</option>
      </select>
      <p class="col-sm-2">班级:</p>
      <select class="col-sm-2"  v-model="selectedClass">
          <option v-for="classNumber in classNumbers">{{classNumber.className}}</option>
      </select>
      <div class="col-sm-1"></div>
      <div class="col-sm-2">
        <a v-bind:href="download + classId">下载</a>
      </div>
    </div>
    <div class="center">
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            班主任、班长
          </div>
          <div class="panel-body myPanel">
            <p class="inline">班主任:{{headTeacher}}
              <button class="btn btn-success btn-sm" v-show="headTeacher == '' "  @click="doModal()">添加</button>
              <button class="btn btn-default btn-sm" v-show="headTeacher != '' "  @click="drop($event)" :data-stuId="headTeacher">删除</button>
            </p>
            <br><br><br><br>
            <p class="inline">班长: {{monitor}}
              <button class="btn btn-success btn-sm" v-show="monitor == '' " @click="doModal()">添加</button>
              <button class="btn btn-default btn-sm" v-show=" monitor != '' " @click="drop($event)" :data-stuId="monitor">删除</button>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            评价小组成员
          </div>
          <div class="panel-body myPanel">
            <div v-for="i in 4">
              <!--<p>{{i}}</p>-->
              <p class="inline">{{commentators[i-1]}}
              <button class="btn btn-success btn-sm" v-show="!commentators[i-1] " @click="doModal()">添加</button>
              <button class="btn btn-default btn-sm" v-show=" commentators[i-1] " @click="drop($event)" :data-stuId="commentators[i-1]">删除</button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
    </div>


    <div class="myTable table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th class="text-center">姓名</th>
            <th class="text-center">学号</th>
            <th class="text-center">专业成绩(80%)</th>
            <th class="text-center">基础性素质测评成绩（10%）</th>
            <th class="text-center">发展性素质测评成绩(10%)</th>
            <th class="text-center">五分制总成绩</th>
            <th class="text-center">详情</th>
          </tr>
        </thead>
        <tbody>
          <tr  v-for="grade in grades">
            <td>{{grade.stuName}}</td>
            <td>{{grade.stuNum }}</td>
            <td>{{grade.study |byte}}</td>
            <td>{{grade.basis |byte}}</td>
            <td>{{grade.development |byte}}</td>
            <td>{{grade.sum |byte}}</td>
            <td><router-link :to="{ name: 'grade', params: { id: grade.stuNum , classId: classId}}">详情</router-link></td>
          </tr>
        </tbody>
      </table>
      <div class="spinner" ref="loadingEle">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
      </div>
      <button class="btn btn-lg btn-success" @click="doModal()">添加</button>
  </div>
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">增加评论小组成员</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label  class="col-sm-2 control-label">身份</label>
                <div class="col-sm-10">
                  <select class="col-sm-12"  v-model="identity">
                    <option value="1">班主任</option>
                    <option value="2">班长</option>
                    <option value="3">评价小组成员</option>
                    <option value="4">学生</option>
                  </select>
                </div>
              </div>
              <div class="form-group" v-show="identity == 4">
                <label  class="col-sm-2 control-label" >年级</label>
                <div class="col-sm-10">
                  <select class="col-sm-12"  v-model="division">
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                  </select>
                </div>
              </div>
              <div class="form-group" v-show="identity == 4">
                <label  class="col-sm-2 control-label" >专业</label>
                <div class="col-sm-10">
                  <select class="col-sm-12"  v-model="newProfession">
                    <option v-for="major in majors"  :value="major.id" >{{major.professionName}}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label  class="col-sm-2 control-label">班级</label>
                <div class="col-sm-10">
                  <select class="col-sm-12"  v-model="classId">
                    <option v-for="all in allClass"  :value="all.id" >{{all.className}}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label  class="col-sm-2 control-label">学工/学号</label>
                <div class="col-sm-10">
                  <input  class="form-control" v-model='stuId'>
                </div>
              </div>
              <div class="form-group">
                <label  class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input  class="form-control" v-model='adminName'>
                </div>
              </div>
              <div class="form-group" v-show="identity == 4">
                <label  class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <select class="col-sm-12" v-model="stuSex">
                    <option  value="男" >男</option>
                    <option  value="女" >女</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
            <button class="btn btn-success btn-sm" @click="submit()">提交</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>

  </div>
</template>

<script>
  import $ from 'jquery'
  import '../../node_modules/bootstrap/dist/js/bootstrap.min'
  import API from '../config/request';
  import {formatDate, byte} from '../config/date';
  /*
  *
  *
  *
  * */
  export default {
    name: 'counselor',
    data () {
      return {
        msg: '',
        url: API.URL,
        majors: [],
        classNumbers: [],
        allClass:[],
        selectedMajor: '',
        selectedClass: '',
        headTeacher: '',
        monitor: '',
        commentators: [],
        grades: [],
        ybid: '',
        identity: '1',
        classId:'1',
        stuId:'',
        adminName:'',
        download:'',
        stuSex:"男",
        newProfession: '',
        division:'2016'  //年级，用于添加学生
      }
    },
    created () {
      this.getMajor()
      this.getAllClass()
      this.download = API.DownLoad
    },
    mounted(){
    },
    watch: {
      selectedMajor: function (newValue) {
        this.getClass(newValue)
      },
      selectedClass: function (newValue) {
        this.getAll(newValue)
        this.getGrade(newValue)
      },
      classId: function (newValue) {
        console.log("new:"+newValue)
      }
    },
    methods: {
      getMajor: function () {
        this.$http.get(this.url + 'common/listprofession').then(function (response) {
          this.selectedMajor = response.body[0].professionName
          this.majors = response.body
          this.newProfession = response.body[0].id
        })
      },
      getAllClass:function () {
        this.$http.get(this.url + 'common/getclass').then(function (response) {
          this.allClass = response.body
        })
      },
      getClass: function (select) {
        let id = 1
        for (let i = 0; i < this.majors.length; i++) {
          //  数据库内有/r/n
          if (select.trim() === this.majors[i].professionName.trim()) {
            id = this.majors[i].id
          }
        }
        this.$http.get(this.url + 'common/getallclass?professionId=' + id).then(function (response) {
          this.classNumbers = response.body
          this.selectedClass = response.body[0].className
        })
      },
      //拿到评价小组成员
      getAll: function (select) {
        let id = 1
        for (let i = 0; i < this.allClass.length; i++) {
          //  数据库内有/r/n
          if (select == this.allClass[i].className) {
            id = this.allClass[i].id
          }
        }
        this.classId = id
        this.$http.get(this.url + 'common/listclassadmin?classId=' + id).then(function (response) {
          let j = 0
          for (let i = 0; i < response.body.length; i++) {
            if (response.body[i].identity == 1) {
              this.headTeacher = response.body[i].stuNum
            } else if (response.body[i].identity == 2) {
              this.monitor = response.body[i].stuNum

            } else {
              this.commentators[j] = response.body[i].stuNum
              j++
            }
          }
          if(response.body.length == 0){
            this.headTeacher = ''
            this.monitor = ''
            this.commentators = []
          }
        })
      },
      getGrade :function(select){
        this.grades = []
        this.$refs.loadingEle.style.display = 'block'
        let id = 1
        for (let i = 0; i < this.allClass.length; i++) {
          //  数据库内有/r/n
          if (select.trim() === this.allClass[i].className.trim()) {
            id = this.allClass[i].id
          }
        }
        this.$http.get(this.url + 'common/findbyclassid?classId=' + id).then(function (response) {
          this.grades = response.body
          this.$refs.loadingEle.style.display = 'none'
        })
      },
      drop : function (event) {
        let stuId = event.target.getAttribute('data-stuId')
        this.$http.post(
          this.url + 'common/deleteadmin',
          {
            'stuId': stuId
          },
          {emulateJSON: true}
        ).then(function (response) {
            if(stuId == this.headTeacher){
              this.headTeacher =''
            }else if(stuId == this.monitor){
              this.monitor = ''
            }else{
              var index = 0
              for(let i=0 ;i<this.commentators.length;i++){
                if(stuId == this.commentators[i]){
                    index = i;
                }
              }
              this.commentators.splice(index ,1)
            }
            alert("删除成功")
        })
      },
      submit:function () {
        let self = this
        let reg = new RegExp("^[0-9]*$");
        if(!reg.test(this.ybid) || !reg.test(this.stuId)){
          alert("易班ID或学工/学号请输入数字")
        }else{
          if(self.identity == 4){
            let data = {
              'professionId': this.newProfession,
              'classId': this.classId,
              'stuNumber': this.stuId,
              'stuName': this.adminName,
              'stuSex': this.stuSex,
              'grade':this.division,
            }
            console.log(data)
            this.$http.post(
              this.url + 'common/createstudent',
              data,
              {emulateJSON: true}
            ).then(function (response) {
              $('#close').click()
              alert("添加成功")
            },function () {
              $('#close').click()
              alert("添加失败")
            })
          }else{
            let data = {
              'identity': this.identity,
              'classId': this.classId,
              'stuId': this.stuId,
              'adminName': this.adminName
            }
            this.$http.post(
              this.url + 'common/createadmin',
              data,
              {emulateJSON: true}
            ).then(function (response) {
              if(this.identity == '1'){
                this.headTeacher = this.stuId
              }else if(this.identity == '2'){
                this.monitor = this.stuId
              }else{
                this.commentators.push(this.stuId)
              }
              $('#close').click()
            })
          }
        }
      },
      doModal(){
        $('.modal').modal('toggle');
      }
    },
    filters: {
      formatDate(data) {
        if(data == null || data == undefined){
          return '日期显示错误';
        }else{
          return formatDate(data);
        }

      },
      byte (data){
        return byte(data)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  .head{
    width: 100%;
    height: 150px;
  }
  .center{
    width: 100%;
    height: 500px;
    display: block;
  }
  .myTable{
    width: 100%;
    display: block;
  }
  .spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 50px auto;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }
  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
 @media screen and (min-width: 800px){
   .head{
     width: 100%;
     height: 50px;
     display: block;
   }
   .center{
     width: 100%;
     height: 250px;
     display: block;
   }
   .myTable{
     width: 100%;
     display: block;
   }
 }


</style>
